[{"id":"bdd498f.cccf768","type":"change","z":"8316223f.316d28","name":"","rules":[{"t":"set","p":"sections.dashboardeditor","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":634,"y":1658,"wires":[[]]},{"id":"f307f208.220d5","type":"template","z":"8316223f.316d28","name":"editor","field":"payload.body","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script>\n   // <section><h2></h2> </section>\n   \n\n    $(document).ready(function () {\n      var dtable = $('#dtable').DataTable({\n            \"ajax\": '/api/files/svg',\n            \"pageLength\": 25,\n            \"lengthMenu\": [ 10, 25, 50, 75, 100 ],\n            \"bLengthChange\": false,\n             \"deferRender\": true\n        } );\n      $('.dataTables_length').addClass('bs-select');\n\n      \n    //   setInterval( function () {\n    //           dtable.ajax.reload( null, false ); // user paging is not reset on reload\n    //           setTimeout( function () { dtable.columns.adjust().draw(); }, 1000 );\n    //       }, 30000 );\n\n\n  });\n\n\n\n   \n</script>\n\n\n<style>\n\n.dataTables_wrapper .dataTables_filter input {\n \n    margin-top: 5px;   \n    margin-right: 5px;   \n}\n\n.dataTables_wrapper .dataTables_info {\n    \n    padding-left: 5px; \n}\nsection1  {\n    border-bottom: 1px solid rgb(255, 255, 255);\n    padding: 0px 0px;\n    /* height: 100vh; */\n    scroll-snap-align: start;\n    /* text-align: center; */\n    position: relative;\n    background: #ffffff;\n    font-size: 14px;\n    }\n\n\n.splitter {\n    width: 100%;\n    height: calc(100vh - 60px);\n    display: flex;\n}\n\n\n#separator {\n    cursor: col-resize;\n    background-color: #aaa;\n    background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>\");\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 5px;\n    height: 100%;\n\n    /* Prevent the browser's built-in drag from interfering */\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n#first {\n    background-color: #fafafa;\n    width: 20%;\n    height: 100%;\n    min-width: 0px;\n    overflow: auto;\n}\n\n#second {\n    background-color: #ffffff;\n    width: 80%;\n    height: 100%;\n    min-width: 1px;\n}\n\n \n}\n\n</style>\n\n<div class=\"splitter maxsiz2\">\n    <div id=\"first\">\n        \n        <section1>\n\n     <!-- https://mdbootstrap.com/docs/jquery/tables/sort/ -->\n<table id=\"dtable\" class=\"table table-striped table-bordered table-sm compact\" cellspacing=\"0\" width=\"99%\">\n     \n     \n<thead> <tr>\n<th class=\"th-sm\">File</th>\n<th class=\"th-sm\">Links</th>\n</tr></thead>\n      \n</table>\n\n\n      </section1>  \n        \n        \n    </div>\n    <div id=\"separator\" ></div>\n    <div id=\"second\" >\n      \n        <iframe id=\"f2\" name=\"f2\" class=\"maxsiz2\" frameborder=\"0\" src=\"\" width=\"100%\" ></iframe>\n\n        \n    </div>\n</div>\n\n<script>\n\n// A function is used for dragging and moving\nfunction dragElement(element, direction)\n{\n    var   md; // remember mouse down info\n    const first  = document.getElementById(\"first\");\n    const second = document.getElementById(\"second\");\n\n    element.onmousedown = onMouseDown;\n\n    function onMouseDown(e)\n    {\n        //console.log(\"mouse down: \" + e.clientX);\n        md = {e,\n              offsetLeft:  element.offsetLeft,\n              offsetTop:   element.offsetTop,\n              firstWidth:  first.offsetWidth,\n              secondWidth: second.offsetWidth\n             };\n\n        document.onmousemove = onMouseMove;\n        document.onmouseup = () => {\n            //console.log(\"mouse up\");\n            document.onmousemove = document.onmouseup = null;\n        }\n    }\n\n    function onMouseMove(e)\n    {\n        //console.log(\"mouse move: \" + e.clientX);\n        var delta = {x: e.clientX - md.e.clientX,\n                     y: e.clientY - md.e.clientY};\n\n        if (direction === \"H\" ) // Horizontal\n        {\n            // Prevent negative-sized elements\n            delta.x = Math.min(Math.max(delta.x, -md.firstWidth),\n                       md.secondWidth);\n\n            element.style.left = md.offsetLeft + delta.x + \"px\";\n            first.style.width = (md.firstWidth + delta.x) + \"px\";\n            second.style.width = (md.secondWidth - delta.x) + \"px\";\n        }\n    }\n}\n\n\ndragElement( document.getElementById(\"separator\"), \"H\" );\n\n</script>\n\n\n<style>\n    \n.jstree-default .jstree-anchor {\n    line-height: 24px;\n    height: 28px;\n}  \n   \n</style>","output":"str","x":389,"y":1658,"wires":[["bdd498f.cccf768"]]},{"id":"22a373a6.d3b6e4","type":"inject","z":"8316223f.316d28","name":"","topic":"","payload":"{\"title\":\"Dashboard Editor\",\"body\":\"\"}","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":239,"y":1659,"wires":[["f307f208.220d5"]]}]